<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            template: `
              <div>
                请输入待办事项：<input type="text" :value="toDoItem" @input="changeInput"><button @click="submit">提交</button>
                <ul>
                  <li v-for="(item, index) in toDoList" :key="index">
                    {{item}}
                  </li>
                </ul>
              </div>
            `,
            setup(){
                const {ref,reactive} = Vue;
                let toDoItem = ref(""); // 代办事项
                let toDoList = reactive([]); // 代办事项列表

                const changeInput = (e)=>{
                    toDoItem = e.target.value;
                }
                const submit = ()=>{
                    toDoItem.value = "";
                    toDoList.push(toDoItem);
                }
                return {
                    toDoItem,
                    toDoList,
                    changeInput,
                    submit,

                }
            }
        });
        const vm = app.mount("#root")
    </script>
</body>
</html>